@charset "UTF-8";
/**
 * 确认订单页
 * @Author river
 * @email lijiang@ymatou.com
 * @Date 2015/10/29
 */

@import'_components/variables.scss';
@import'_components/_mixin.scss';
@import'_components/reset.scss';
@import'_components/button.scss';
@import'_components/iconfont.scss';
@import'_components/loading.scss';

@import'assets/ymt.ui.scss';

$price-color:#cc3333;//价格颜色

.fr{
    float:right;
}

.fl{
    float:left;
}

.settle-container,
body{
    background:#efefef;
}

//收件地址
.address-wrapp{
    background:#fff;
    color:#646464;
    font-size:$rem*24;
    height:$rem*170;
    padding:$rem*30 $rem*20;
    margin-bottom:$rem*20;
    padding-right:$rem*90;
    position:relative;
    word-break: break-all;
    &:after{
        content:' ';
        width:100%;
        position:absolute;
        bottom:0;
        left:0;
        height:$rem*8;
        background-image: url();
        background-size:$rem*136 $rem*8;
        background-repeat-y: no-repeat;
    }
   
    h3{
        font-size:$rem*30;
        color:#383838;
    }
    .icon-arrow-right{
        font-size:$rem*34;
        position:absolute;
        right:$rem*27;
        top:50%;
        color:#9B9B9B;
        transform: translate(0,-50%);
    }
    .add-address{
        height: $rem*100;
        line-height: $rem*100;
        font-size: $rem*30;
        text-align: right;
        font-weight: bold;
        color:#383838;
    }
}
//海关提示
.customs-wrapper{
    background:#fff;
    padding:0 $rem*20;
    margin-bottom:$rem*18;
}
.customs-title{
   &-wrapper{
        height:$rem*72;
        line-height:$rem*72;
        &>div{
            font-size:$rem*24;
            color:#686868;
        }
        .icon-customs{
            font-size:$rem*24;
            vertical-align: $rem*2;
        }
   }
   
   &.fixed{
        position:fixed;
        left:0;
        top:0;
        z-index:9;
        background:rgba(0,0,0,.6);
        width:100%;
        color:#fff;
        text-align:center;
   }
}

.customs-input{
    input{
        padding:$rem*28 0;
        width:$rem*400;
        color:#686868;
        //border:1px solid #9b9b9b;
        font-size:$rem*28;
        height:$rem*90;
        -webkit-user-select:element;
    }
    .msg-text{
        color:#cc3333;
        font-size:$rem*24;
        display:none;
        margin-top:$rem*5;
    }
    &.error{
        .msg-text{
            font-size: $rem*20;
            display:inline;
            float: right;
            margin-top: $rem*28;
        }
    }
}

.buyer-list-wrapp{

}

.buyer-item{
    //padding:$rem*21 $rem*24;
}

.buyer-item-hd{
    background:#fff;
    padding:0 $rem*20;
    height: $rem*80;
    line-height: $rem*80;
    strong{
        font-size:$rem*24;
        color:#646464;

    }

}

.pro-list{
    background:#fff;
    &>li{
        overflow:hidden;
        background:#f8f8f8;
        margin-bottom: $rem*18;
        padding:$rem*20 $rem*24;
        &:last-child{
            margin-bottom: 0;
        }
    }
    .pic{
        width:$rem*152;
        height:$rem*152;
        float:left;
        .pic-carrier{
            background-size:contain;
            background-repeat:no-repeat;
            background-position:center;
            width:100%;
            height:100%;
            background-color: #fff;
        }
    }

    .info{
        padding-left:$rem*172;
        position:relative;
        padding-right:$rem*140;
        h4{
             font-size:$rem*24;
             height:$rem*68;
             color:#383838;
             line-height: $rem*34;
             margin-bottom:$rem*9;
             padding-left:$rem*1;
             @include textOverFlow(2);
        }
        &>.prop{
            margin-right:$rem*5;
        }
        &>p{
            color:#9B9B9B;
            font-size:$rem*20;
            .prop{
                margin-right: $rem*5;
            }
            .pro-flag{
                padding-right:$rem*20;
                font-size:$rem*20;
                i{
                    font-size:$rem*24;
                    margin-right:$rem*5;
                }
                &.xloboBoned{
                    color:#482517;
                }
                &.local-return{
                    color:#8a5129;
                }
            }
        }

    }
    .attr{
        position:absolute;
        right:0;
        top:0;
        color:#c4c4c4;
        font-size:$rem*22;
        font-weight:normal;
        strong{
            //color:$price-color;
            color:#383838;
            font-size:$rem*24;
        }
       /*  del{
            color:#c4c4c4;
            display:block;
        } */
        .discount{
            color: #CC3333;
            font-size:$rem*20;
        }
     }
     .num{
        font-size:$rem*24;
        color:#646464;
        text-align: right;
        margin-top: $rem*20;
     }
}
//商品小计
.settle-count{
    margin-bottom:$rem*18;
    background: #fff;
    text-align: right;
    color:#646464;
    padding:$rem*25 $rem*20 $rem*20;
    font-size:$rem*24;
    .price-num{
        strong{
            font-size:$rem*24;
        }
    }
    .price{ 
        color:$price-color;
    }
    b{
        color:#646464;
        margin-right: $rem*20;
    }
    .freight-total{
        font-size:$rem*18;
        line-height: 1.4;
    }
}
//优惠券使用
.discount-wrapper{
   background:#fff;
   border-top:1px solid #ebebeb;
   

}
.discount-hd{
    height:$rem*54;
    line-height:$rem*54;
    font-size:$rem*20;
    background:#f8f8f8;
    color:#9b9b9b;
    padding:0 $rem*20;
    &>span{
        color:#9b9b9b;
        font-size:$rem*24;
        float:right;
        .selected,
        strong{
            color:$price-color;
        }
    }
}
//优惠列表
.discount-list{
    padding:0 $rem*20;
    margin-bottom:$rem*18;
    &>li{
        height:$rem*132;
        line-height:$rem*132;
        font-size:$rem*26;
        color:#383838;
        border-bottom:1px solid #ebebeb;
        position:relative;
        &>label{
            vertical-align: middle;
        }
        //红包
        &.gift-wrapper{
            padding-top:$rem*32;
            line-height: 1.5;
            position:relative;
            .sub-label{
                font-size:$rem*24;
                color:#9b9b9b;
                margin-top: $rem*4;
                line-height: 1;
            }
            .discount-desc{
                position: absolute;
                right: 0;
                top:50%;
                margin-top: $rem*-16;
                transition: transform(0,-100%);
            }
        }
        .coupon-code{
            padding:$rem*16 $rem*24;
            color:#9b9b9b;
            //background:#f1f1f1;
            font-size:$rem*28;
            border-radius:$rem*5;
            width:$rem*200;
            &:disabled{
                background:#fff;
            }
        }
        .label{
            color:#383838;
            font-size:$rem*28;
        }
        &:last-child{
            border-bottom:0;
        }
        &>small{
            font-size:$rem*22;
            color:#868686;
            float:right;
            &>strong{
                color:$price-color;
            }
        }
        .icon-checkBox
        {
            font-size:$rem*40;
            color:#9b9b9b;
            margin-right:$rem*20;
            //vertical-align: middle;
            &-selected{
                color:#c4392f
            }
        }
        //不可点击状态
        &.disabled{
            color:#9b9b9b;
            .label{
                color:#9b9b9b;
            }
            small,
            .icon-checkBox{
                color:#cecece;
            }
        }
        //优惠描述
        .discount-desc{
            color:#cc3333;
            font-size:$rem*20;
            margin-right:$rem*10;
            float: right;
        }
        
    }
}

.settle-tools-wrapper{
    height:$rem*110;
}
//结算工具条
.settle-tools{
    position:fixed;
    z-index: 4;
    bottom:0;
    left:0;
    width:100%;
    background:#fff;
    height:$rem*100;
    text-align:right;
    border-top:1px solid #dddddd;
    display: table;
    &.reRelative{
        position:relative;
    }
    .text{
        color:#646464;
        font-size:$rem*24;
          //display: inline-block;
          margin-right:$rem*24;
          padding:$rem*40 $rem*20;
          line-height:1.2;
          font-weight: bold;
          padding-right:$rem*224;
         strong{
            color:$price-color;
        }
    }
    .btn{
        position:absolute;
        top:0;
        right:0;
        width:$rem*224;
        height:100%;
        color:#fff;
        font-size:$rem*36;
        float:right;
        border-radius:0;
    }
}


//弹出层
.dialog{
    &-mask{
        position: fixed;
        z-index: 99;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;

        background: rgba(56,56,56,.5);
        &.open
        {
            display: block;
        }
    }
    &-content{
        position:relative;
        height:100%;
        .beat-loading{
            margin:$rem*20 auto;
        }
    }
    max-height:80%;
    background:#fff;
    z-index:100;
    position: fixed;
    width:$rem*656;
    border-radius:$rem*15;
    border:1px solid #9fa09f;
    padding:$rem*30 $rem*24;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align:center;
    overflow-y: auto;
    display:none;
    &.open{
        display:block;
    }
    .title{
        font-size:$rem*35;
        color:#383838;

    }
    .input-group{
        margin:$rem*30 0;
        &>input{
            width:100%;
            border:1px solid #cecece;
            height:$rem*80;
            padding:$rem*21 $rem*24;
            color:#646464;
            -webkit-user-select:element;
        }
        &.vliadCode{
            text-align:left;
            &>input{
                width:$rem*250;
                -webkit-user-select:element;
            }
            .btn{
                height:$rem*80;
                color:#fff;
                padding:0 $rem*50;
                font-size:$rem*30;
                vertical-align: middle;
            }
        }
    }
    .assist-msg{
        font-size:$rem*24;
        color:#9b9b9b;
    }
    .btn-group{
        overflow:hidden;
         .btn{
            height:$rem*84;
            font-size:$rem*35;
        }
    }
}

//我的优惠券
.discount-list-wrapper{
    height: $rem*640;
    overflow-y: auto;
    .title-wrapper{
        height: $rem*90;
    }
    .title{
        position:fixed;
        width: 100%;
        z-index:2;
    }
}
.my-discount{
    margin-top:$rem*20;
    &-item{
        text-align:left;
        padding:$rem*34 $rem*20;
        border-bottom:1px solid #dedede;
        position:relative;
        &:last-child{
            border-bottom:0;
        }
        h3{
            color:$price-color;
            color:$rem*36;
        }
        p{
            font-size:$rem*24;
            color:#969696;
        }
        &.selected{
            &:after{
                content: '';
                position:absolute;
                width: $rem*22;
                height: $rem*14;
                border-left:2px solid #CC3333;
                border-bottom:2px solid #CC3333;
                top:50%;
                right:$rem*25;
                transform: rotate(-55deg);
            }
        }
        &.disabled{
            h3,p{
                color:#dedede;
            }
        }
    }
   
}

//收件地址管理
.address-edit{
    &-wrapper{
       width: 85%;
       height: 100%;
       position: fixed;
       z-index:100;
       top: 0;
       right: 0;
       background:#fff;
       overflow: hidden;
      //transform: translateX(100%);
       .btn-group{
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            padding:$rem*24;
            .btn{
                height:$rem*80;
                font-size:$rem*30;
            }
       }
    }
    &-inner{
        position:relative;
        height:100%;
        min-height:$rem*800;
        overflow-y:auto;
    }
    &-list{
        & > li{
            color:#9b9b9b;
            font-size:$rem*24;
            padding:$rem*24;
            border-bottom:1px solid #cecece;
            position:relative;
            display: -webkit-box;
            display: flex;
            -moz-box-align:center;
            -webkit-box-align:center;
            -o-box-align:center;
            box-align:center;
            display: -webkit-box;
            &.selected{
                background:#f1f1f1;
                .icon-checkBox-selected2{
                    color:#C4392F;
                }
            }
            label{
                -moz-box-flex: 1;
                -webkit-box-flex: 1;
                box-flex: 1;
                margin-right:$rem*30;
                [class*=icon-]{
                    font-size:$rem*40;
                }
            }
            .text-area{
                -moz-box-flex: 1;
                -webkit-box-flex: 1;
                box-flex: 1;
                padding-right:$rem*60;
            }
            h5{
                font-size:$rem*30;
                color:#646464;
            }
            .icon-arrow-right{
                position:absolute;
                right:$rem*24;
                top:50%;
                font-size:$rem*30;
                transform: translate(0,-50%);
                color:#646464;
            }
        }

    }

}
.address-mask{
    &-fix{
        position: fixed;
        z-index: 99;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.7);
        display:none;
        &.open{
            display:block;
        }
    }
    &-close{
        width:$rem*60;
        background:#fff;
        border-radius:50%;
        height:$rem*60;
        position:absolute;
        top:50%;
        left:$rem*12;
        transform: translate(0,-50%);
        text-align:center;
        .icon-arrow-right{
            color:#858585;
            font-size:$rem*40;
        }
    }
}
//编辑表单
.address-form{
   padding:$rem*24;
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   .input-group{
        width:100%;
        margin-bottom:$rem*20;
        input,
        select{
            height:$rem*80;
            border:1px solid #e5e5e5;
            width:100%;
            padding:$rem*26 $rem*20;
            font-size:$rem*30;
            border-radius: $rem*6;
          background-color: #FFF;
            box-shadow: 0 1px 0px #FFF;
            user-select:element;
            -webkit-user-select:element;
        }
        select{
            padding:0 $rem*20;
        }
   }
   .three-section{
    display: -webkit-box;
    display: flex;
    -moz-box-align:center;
    -webkit-box-align:center;
    -o-box-align:center;
    box-align:center;
    display: -webkit-box;
    &>span{
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        box-flex: 1;
        display: block;
        margin-right:$rem*10;
    }
   }
   .txt_msg{
    font-size:$rem*20;
    color:#9b9b9b;
    margin-bottom:$rem*20;
   }
   .selectDefault{
    font-size:$rem*30;
    color:#9b9b9b;
   }
   .icon-checkBox-selected2{
    color:#dedede;
    font-size:$rem*40;
    vertical-align: middle;
    &.selected{
       color:#C4392F;
    }
   }
   //删除地址
   .del-address{
      color:$price-color;
      padding:$rem*16;
      border:1px solid #ddd;
      background::#fff;
      font-size:$rem*30;
      border-radius: $rem*6;
   }
}

.pt-page-container{
    position:relative;
    width:100%;
    overflow:hidden;
}
.pt-page{
   visibility:hidden;
}
.pt-page-current{
   visibility: visible;
}

.pt-page-scaleDown {
  -webkit-animation: scaleDown .7s ease both;
  -moz-animation: scaleDown .7s ease both;
  animation: scaleDown .7s ease both;
  visibility: visible;
}

@keyframes scaleDown {
    to { opacity: 0; transform: scale(.8); }
}

.pt-page-moveFromRight {
  -webkit-animation: moveFromRight .6s ease both;
  -moz-animation: moveFromRight .6s ease both;
  animation: moveFromRight .6s ease both;
  visibility: visible;
}

@-webkit-keyframes moveFromRight {
    from { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRight {
    from { -moz-transform: translateX(100%); }
}
@keyframes moveFromRight {
    from { transform: translateX(100%); }
}

.pt-page-moveToRight {
  -webkit-animation: moveToRight .6s ease both;
  -moz-animation: moveToRight .6s ease both;
  animation: moveToRight .6s ease both;
  visibility: visible;
}

@-webkit-keyframes moveToRight {
    to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveToRight {
    to { -moz-transform: translateX(100%); }
}
@keyframes moveToRight {
    to { transform: translateX(100%); }
}


//订单状态变更
.preorder-no-result{
    text-align:center;
    color:#383838;
    font-size:$rem*30;
    .no-result-bg{
        width:$rem*122;
        height:$rem*386;
        margin:$rem*50 auto;
        background:url() no-repeat;
        background-size: contain;
    }
}

//留言
.leaveMessage{
    padding:0 $rem*24;
    background:#fff;
    position:relative;
    font-size: $rem*28;
    label{
        position:absolute;
        top:$rem*23;
        color:#383838;
        font-weight: bold;
        z-index:2;
        left:$rem*24;
    }
    textarea{ 
        font-size: $rem*28; 
        height: $rem*90;
        border:0;      
        width:100%;
        padding-top: $rem*29;
        background:#fff;
        padding-left:$rem*90;
        transition: height 0.25s ease-in-out;
        color:#646464;
        user-select:element;
        &:focus{
            height: $rem*250;
        }
    }
    
}
//申明
.declare{
    margin: $rem*50 auto;
    text-align: center;
    a{
        font-size:$rem*22;
        color:#646464;
        text-decoration: underline;
    }
}
//优惠券选择框
.coupon-select{
    padding:$rem*16 $rem*24;
    color:#646464;
    background:#f1f1f1;
    font-size:$rem*24;
    border-radius:$rem*5;
    margin-left:$rem*15;
    .icon-arrow-down{
        font-size:$rem*16;
    }
}

.dialog-area{
    padding:0;
    width:100%;
    border-radius:0;
    bottom:0;
    left:0;
    min-height:$rem*430;
    transform: translate(0, 100%);
    transition: transform 0.25s ease-in-out;
    visibility: hidden;
    .title{
        height: $rem*90;
        line-height: $rem*90;
        color:#383838;
        font-size:$rem*34;
        text-align: center;
        background: #F8F8F8;
        border:1px solid #DEDEDE;
    }
    &.open{
        transform: translate(0, 0);
            visibility: initial;
    }
}

.dialog-select-wrapper{
    min-height:$rem*500;
    overflow: hidden;
}


.entrust-wrapper{  
    padding:0;
    
    .dialog-content{
        position:relative;
        color:#646464;
        .btn{
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            height: $rem*90;
            border-radius:0;
        }
        .title{
            height: $rem*90;
            line-height: $rem*90;
            color:#383838;
            font-size:$rem*34;
            text-align: center;
            background: #F8F8F8;
            border:1px solid #DEDEDE;
        }
        .content{
            padding:$rem*10 $rem*20;
            font-size:$rem*28;
            color:#646464;
            text-align:left;
            text-indent: 2em;
        }
    }
}

//现货标志
.spot-goods-flag{
    width: $rem*24;
    height: $rem*24;
    line-height: $rem*24;
    text-align: center;
    border-radius:50%;
    display: inline-block;
    color:#fff;
    background:#338ADB;
    font-size:$rem*14;
    vertical-align: middle;
    margin-right: $rem*8;
}

//包邮包税
.freight-discount{
    border-radius:$rem*6;
    border:1px solid #cc3333;
    color:#cc3333;
    font-size:$rem*18;
    line-height: 0;
    padding:$rem*2 $rem*6;
    margin-right: $rem*5;
}

///
.select-group{
    position:relative;
    height: $rem*60;
    select{
        position:absolute;
        z-index: 2;
        width: 100%;
        left:0;
        top:$rem*-15;
        opacity: 0;
        height: $rem*60;
        background: #f1f1f1;
            color: #646464;
        font-size:$rem*24;
         padding:$rem*8;
         line-height: 0;
         min-width: $rem*140;
    }
}

.ws-android{
  .select-group{
      select{
        opacity:1;
      }  
    }
    .coupon-select{
        opacity: 0;

    }
}